<template>
  <CommonPage>
    <AppCrud
      ref="tableRef"
      :columns="columns"
      default-sort="weight"
      v-model:query="query"
      :get-data="sizeApi.page"
    >
      <query-item label="尺寸">
        <a-input
          allow-clear
          size="small"
          placeholder="请输入尺寸"
          v-model:value="query.name"
        ></a-input>
      </query-item>

      <template #action>
        <a-button type="primary" @click="handleAdd">
          <template #icon><PlusOutlined></PlusOutlined></template>
          创建尺寸
        </a-button>
      </template>
    </AppCrud>

    <AppModal ref="modalRef" width="500px">
      <a-form ref="formRef" :model="formModel" :label-col="{ style: { width: '90px' } }">
        <a-form-item label="尺寸" name="name" :rules="[{ required: true, message: '此为必填项' }]">
          <a-input placeholder="请输入尺寸" v-model:value="formModel.name"></a-input>
        </a-form-item>
        <a-form-item label="排序">
          <a-input-number
            :min="0"
            :step="1"
            :max="1000"
            v-model:value="formModel.weight"
          ></a-input-number>
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea
            placeholder="请输入备注信息"
            v-model:value="formModel.description"
          ></a-textarea>
        </a-form-item>
      </a-form>
    </AppModal>
  </CommonPage>
</template>
<script setup lang="ts">
import { AppCrud, AppModal, CommonPage, QueryItem } from '@/components/common'
import { useCrud } from '@/hooks/useCrud.ts'
import sizeApi, { SizeDto } from '@/api/size.ts'
import { Button, Space } from 'ant-design-vue'

const tableRef = ref()

const query = ref({
  name: null,
  username: null,
})

const columns = [
  {
    title: '尺寸',
    dataIndex: 'name',
    width: 200,
  },
  {
    title: '备注信息',
    dataIndex: 'description',
  },
  {
    title: '排序',
    dataIndex: 'weight',
    width: 100,
    align: 'center',
  },
  {
    title: '创建时间',
    width: 200,
    dataIndex: 'createdAt',
  },
  {
    title: '操作',
    align: 'center',
    width: 140,
    render: ({ record }: any) => {
      return h(
        Space,
        {},
        {
          default: () => [
            h(
              Button,
              {
                size: 'small',
                type: 'primary',
                onClick: () => {
                  handleEdit(record)
                },
              },
              {
                default: () => '编辑',
              },
            ),
            h(
              Button,
              {
                size: 'small',
                danger: true,
                onClick: () => handleDelete(record.id),
              },
              {
                default: () => '删除',
              },
            ),
          ],
        },
      )
    },
  },
]

const {
  modalRef,
  formRef,
  formModel,
  modalAction,
  handleEdit,
  handleAdd,
  handleSave,
  handleDelete,
} = useCrud<SizeDto>({
  name: '尺寸',
  initForm: {
    name: null,
    description: null,
    weight: 0,
  },
  doCreate: sizeApi.create,
  doUpdate: sizeApi.update,
  doDelete: sizeApi.delete,
  doGet: sizeApi.get,
  refresh: () => tableRef.value?.handleSearch(),
})

onMounted(() => {
  tableRef.value?.handleSearch()
})
</script>

<style scoped></style>
